<template>
    <!-- A4 纸 -->
    <div ref="designPaper" :class="['design-paper-a4', { layoutRow: element.options.layout === 'row' }, { active: selectItem.id === element.id }]"
        :style="{
            'padding-top': `${element.options.paddingTop}mm`,
            'padding-bottom': `${element.options.paddingBottom}mm`,
            'padding-left': `${element.options.paddingLeft}mm`,
            'padding-right': `${element.options.paddingRight}mm`,
            'width': `${element.options.designWidth}mm`, // 仅在设计阶段使用
            'height': `${element.options.designHeight}mm` // 仅在设计阶段使用
        }"
        @click.stop="handleSelectItem()">
        <!-- 内容 -->
        <draggable class="design-element-items" :list="element.elementItems"
            v-bind="{ group:'componentItem', ghostClass: 'ghost', animation: 200, handle: '.drag-widget' }"
            :no-transition-on-drag="true"
            @add="addDesignComponentItem($event, element)">
            <transition-group name="fade" tag="div" class="design-element-items">
                <template v-for="(el, index) in element.elementItems">
                    <DesignLayout
                        v-if="el && el.type === 'layout'"
                        :key="el.id || index"
                        :element="el"
                        :index="index"
                        :selectItem.sync="selectItem_sync"
                        :parentElement="element"
                        :Api="Api">
                    </DesignLayout>
                    <DesignBase v-if="el && el.type === 'base'"
                        :key="el.id || index"
                        :element="el"
                        :index="index"
                        :selectItem.sync="selectItem_sync"
                        :parentElement="element"
                        :Api="Api">
                    </DesignBase>
                </template>
            </transition-group>
        </draggable>
        <!-- 页码 -->
        <div v-show="element.options.isPage" :class="['A4-page', { right: element.options.pagePosition === 'right' }]">
            — {{ index + 1 }} —
        </div>
        <!-- 组件操作-删除按钮 -->
        <div class="design-paper-action" v-if="selectItem.id === element.id">
            <el-button-group>
                <el-tooltip effect="dark" content="复制" placement="top">
                    <el-button type="primary" icon="el-icon-copy-document" @click.stop="copyItem(index)"></el-button>
                </el-tooltip>
                <el-tooltip effect="dark" content="删除" placement="top">
                    <el-button type="primary" icon="el-icon-delete" @click.stop="deleteElement(index)"></el-button>
                </el-tooltip>
            </el-button-group>
        </div>
    </div>
</template>

<script>
import draggable from 'vuedraggable';
import DesignLayout from "../DesignLayout/DesignLayout.vue";
import DesignBase from "../DesignBase/DesignBase.vue";
import { getUUID } from "@/utils/index";
import * as _ from 'lodash';
import Observer from "@/utils/eventBus.js";
import Watermark from "../../../../utils/watermark";
export default {
    name: "DesignPaper",
    props: {
        element: {
            type: Object
        },
        index: {
            type: Number
        },
        selectItem: {
            type: Object
        },
        Api: {
            type: Object
        },
        parentElement: {
            type: Object
        }
    },
    components: {
        draggable,
        DesignLayout,
        DesignBase
    },
    data() {
        return {
            Watermark: null,
            selectItem_sync: this.selectItem
        }
    },
    methods: {
        handleSelectItem() {
            this.selectItem_sync = this.element;;
        },
        addDesignComponentItem($event, element) { // 添加节点
            const newIndex = $event.newIndex;
            let data = _.cloneDeep(element.elementItems[newIndex]);
            this.$set(element.elementItems, newIndex, {
                id: getUUID(),
                ...data
            });
            // 选中新添加的元素
            this.selectItem_sync = element.elementItems[newIndex];
        },
        copyItem(index) { // 复制元素
            let deepData = _.cloneDeep(this.parentElement.elementItems[index]);
            deepData.elementItems.forEach(item => {
                item.id = getUUID();
                if (item.type === 'layout') { // 递归复制
                    if (item.optionData && item.optionData.length > 0) {
                        item.optionData.forEach(c => {
                            c.elementItems.forEach(e => {
                                e.id = getUUID();
                            })
                        })
                    } else if (item.columns && item.columns.length > 0) {
                        item.columns.forEach(c => {
                            c.elementItems.forEach(e => {
                                e.id = getUUID();
                            })
                        })
                    }
                }
            });
            let cloneData = {
                ...deepData,
                id: getUUID()
            }
            this.parentElement.elementItems.splice(index, 0, cloneData);
            this.$nextTick(() => {
                this.selectItem_sync = this.parentElement.elementItems[index + 1];
            });
        },
        deleteElement(index) { // 删除元素
            if (this.parentElement.elementItems.length - 1 === index) { // 如果删除当前选中元素
                if (index === 0) {
                    this.selectItem_sync = {};
                } else {
                    this.selectItem_sync = this.parentElement.elementItems[index - 1];
                }
            } else {
                this.selectItem_sync = this.parentElement.elementItems[index + 1];
            }
            this.$nextTick(() => {
                this.parentElement.elementItems.splice(index, 1);
            })
        },
        designPaper(data) { // 处理一些事件
            if (data.type === 'watermark') this.handleWatermark(data.val);
        },
        handleWatermark(val) { // 水印
            this.$nextTick(() => {
                if (!this.Watermark) { // if 没有 直接创建对象
                    let dom = this.$refs.designPaper;
                    this.Watermark = new Watermark(dom, {
                        watermark_width: 130,
                        watermark_font: 'fs_gb2312'
                    });
                }
                // 处理 创建水印/删除水印
                if (val) { // 生成水印
                    if (!this.Watermark.haveWatermark()) this.Watermark.setWatermark();
                } else {
                    this.Watermark.clearWatermark();
                }
            })
        }
    },
    mounted() {
        Observer.$on('designPaper', (data) => {
            if (this.selectItem_sync.id !== this.element.id) return;
            this.designPaper(data);
        });
        // 水印
        if (this.element.options.watermark) this.handleWatermark(true);
    },
    beforeUpdate() {
        if (this.element.options.watermark) { // 有水印
            this.handleWatermark(true);
        } else this.handleWatermark(false);
    },
    watch: {
        selectItem(val) {
            this.selectItem_sync = val;
        },
        selectItem_sync: {
            handler(val) {
                this.$emit('update:selectItem', val);
            },
            deep: true
        }
    }
}
</script>

<style>
    @import url('./DesignPaper.css');
</style>